<template>
	<view class="user-card">
		<view class="reviews-container">
			<view class="rating-section">
				<view class="rating-count">
					<view class="good-rating" :class="{ active: selectedEval === 1 }" @click="handleEval(1)">我发出的</view>
					<view class="bad-rating" :class="{ active: selectedEval === 2 }" @click="handleEval(2)">我收到的</view>
				</view>
			</view>
			<view v-if="reviews.length > 0" class="review-item" v-for="(review, index) in reviews" :key="index">
				<view class="reviewer-name">
					<text>{{ review.start_name }} - {{ review.end_name }}</text>
					<image v-if="review.type == 1" class="reviews-icon" src="/static/home/reviews.png" mode="aspectFill"></image>
					<image v-if="review.type == 2" class="reviews-icon" src="/static/personalCenter/bad.png" mode="aspectFill"></image>
				</view>
				<view class="review-content">{{ review.content }}</view>
			</view>
			<empty-data class="my-trip" v-if="reviews.length == 0" defaultText="暂无数据" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			reviews: [],
			userInfo: null,
			selectedEval: 1
		};
	},
	onLoad(option) {
		this.userInfo = uni.getStorageSync('userInfo');
		this.getData();
	},
	methods: {
		handleEval(type) {
			this.selectedEval = type;
			this.getData();
		},
		async getData() {
			let params = {
				page: 1,
				size: 20,
				type: this.selectedEval
			};
			let { page, size, type } = params;
			let url = `/h5/user/myEvaluate?page=${page}&size=${size}&type=${type}`;
			try {
				const data = await this.$http.get(url);
				this.reviews = data.data.list || [];

				// {
				//     type_text: '好评',
				//     start_name: '成都市',
				//     end_name: '自贡市',
				//     content: '开车很稳，司机态度好',
				//     start_time: '2025-01-01 12:00:00',
				//     type: 1,
				// }
			} catch (error) {}
		}
	}
};
</script>

<style>
.user-card {
	padding: 20rpx 26rpx;
}

/*  */
.wallet-card2 .credit-header-left,
.credit-header-right {
	text-align: center;
}

.credit-header-right {
	padding-left: 248rpx;
}

.wallet-card2 .title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #ffffff;
	line-height: 48rpx;
	padding-bottom: 30rpx;
}

.wallet-card2 .score {
	font-family: DINPro, DINPro;
	font-weight: 500;
	font-size: 48rpx;
	color: #ffffff;
	line-height: 48rpx;
}

.wallet-card2 {
	width: 100%;
	height: 220rpx;
	background-image: url('~@/static/home/reviews-bg.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rating-section {
	margin-bottom: 20px;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #ffffff;
	line-height: 48rpx;
	text-align: center;
	display: flex;
	justify-content: center;
}

.rating-count {
	display: flex;
	border: 2rpx solid #ff7937;
	background: #ffffff;
	border-radius: 16rpx;
}

.good-rating,
.bad-rating {
	width: 320rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color: #666666;
}
.good-rating {
	border-radius: 16rpx 0 0 16rpx;
}
.bad-rating {
	border-radius: 0 16rpx 16rpx 0;
}
.active {
	width: 320rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: #ffffff;
	background: #ff7937;
}
.reviews-container {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
}

.review-item {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dashed #eee;
}

.review-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.reviewer-name {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 30rpx;
	font-weight: 500;
	color: #0b1f20;
	padding-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.reviews-icon {
	width: 40rpx;
	height: 40rpx;
}

.review-content {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #0b1f20;
}
</style>
